<script setup lang="ts">

import Btn from '@/components/Btn.vue'
import type {IFrame} from "@/types";

const props = defineProps<{ data: IFrame }>()

function add() {
  props.data.checked = true
}
</script>

<template>
  <div class="framework">
    <ul>
      <li>{{ data.title }}</li>
      <li>{{ data.content }}</li>
      <li>{{ data.date }}</li>
    </ul>
    <div>
      <Btn :type="data.checked" :fn="()=>{data.checked = !data.checked}"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.framework {
  margin: 20px 0;
  padding: 10px;
  width: 400px;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);

  display: flex;
  align-items: center;

}

.framework ul {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>